<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-18 14:54:40
 * @LastEditTime: 2024-07-10 09:29:31
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 资产面板
 * @FilePath: \chu-meng\client\src\pages\Design\components\SidebarArea\ComponentSidebar\index.vue
 * Copyright 版权声明
-->

<template>
  <div class="modWrap" style="height: 100%;">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="BASE" tab="组件">
        <BaseComponent ref="BaseComponentRef"></BaseComponent>
      </a-tab-pane>
      <a-tab-pane key="CUSTOM" tab="自定义组件">2</a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup>
// import {
//   RotateLeftOutlined,
//   RotateRightOutlined,
//   FilePptOutlined
// } from '@ant-design/icons-vue'
import { ref } from 'vue'

import BaseComponent from './Base/index.vue'

const activeKey = ref('BASE')
</script>

<style lang="scss" scoped>
.modWrap{
  :deep(.ant-tabs){
    height: 100%;
    position: relative;
    .ant-tabs-nav{
      .ant-tabs-nav-wrap{
        .ant-tabs-nav-list{
          width: 100%;
          .ant-tabs-tab{
            display: block;
            flex: 1;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
